JavaScript Cookbook by Powers Shelley

Author:Powers, Shelley [Shelley Powers]
Language: eng
Format: epub, mobi
Tags: COMPUTERS / Programming Languages / JavaScript
ISBN: 9781449395926
Publisher: O'Reilly Media
Published: 2010-07-06T16:00:00+00:00

13.4. Hiding Page Sections

Problem

You want to hide an existing page element and its children until needed.

Solution

You can set the CSS visibility property to hide and show the message:

msg.style.hidden="visible"; // to display msg.style.hidden="hidden"; // to hide

or you can use the CSS display property:

msg.style.display="block"; // to display msg.style.display="none"; // to remove from display

Discussion

Both the CSS visibility and display properties can be used to hide and show elements. There is one major difference between the two that impacts on which you’ll use.

The visibility property controls the element’s visual rendering, but its physical presence still affects other elements. When an element is hidden, it still takes up page space. The display property, on the other hand, removes the element completely from the page layout. The property can take several values, but there are four of interest to us:

none

When display is set to none, the element is removed completely from display.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.